<template>
	<view class="container">
		<!-- 标题区域 -->
		<view class="title-area">
			<text class="title">编排方式</text>
			<view class="button-group">
				<button class="btn active-btn">按键编排</button>
				<button class="btn">扫码编排</button>
			</view>
		</view>

		<!-- 内容区域 -->
		<span class="anNiu">按钮编排</span>
		<view class="bianPai">
			<uni-steps :options="[{title: ''}, {title: ''} ,{title:''}]" :active="1"></uni-steps>
		</view>

		<view class="content-area">
			<image
				src=""
				mode=""></image>
			<!-- 提示文字 -->
			<text class="hint-text">所有空开关断之后，点击开始按钮</text>

			<!-- 开始按钮 -->
			<button class="start-btn">开始</button>
		</view>

		<view class="shenYu">
			<button class="skip-btn">跳过</button>
		</view>

	</view>

	<!-- 跳过按钮 -->


</template>

<script setup>

</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #f7f7f7;
		box-sizing: border-box;
	}

	.title-area {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		background-color: #fff;
		padding: 15px;
		margin: 5px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.button-group {
		display: flex;
	}

	.btn {
		padding: 8px 16px;
		margin-left: 10px;
		background-color: #f0f0f0;
		border-radius: 4px;
		font-size: 14px;
		color: #666;
		border: none;
		cursor: pointer;
	}

	.active-btn {
		background-color: #1296db;
		color: #fff;
	}

	.anNiu {
		margin: 0px 0px 0px 20px;
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.bianPai {
		width: 100%;
		height: 50px;
		background-color: #fff;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.content-area {
		margin-top: 20px;
		width: 100%;
		height: 400px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.hint-text {
		font-size: 14px;
		color: #666;
		text-align: center;
		margin: 20px 0;
	}

	.start-btn {
		width: 150px;
		padding: 10px;
		background-color: #1296db;
		color: #fff;

		border-radius: 4px;
		border: none;
		font-size: 16px;
		margin-top: 10px;
	}

	.shenYu {
		width: 100%;
		height: 300px;
		/* background-color: red; */
		display: flex;
	}

	.skip-btn {
		width: 200px;
		height: 40px;
		padding: 10px;
		background-color: #1296db;
		margin-top: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
</style>
说明：